<script setup>
import { reactive, ref, onMounted } from 'vue'
import { resetForm, objCoppy, myConfrim } from '@/utils'
import {
    getUserListApi, addApi, editApi, deleteApi,
    getListApi, addStroyApi,
    editStroyApi, deleteStroyApi
} from '@/api/build'


// 搜索表单内容
const searchModel = reactive({
    // 分页选中页
    currentPage: 1,
    // 默认每页的大小
    pageSize: 10,
    // 分页的总条数
    total: 0,
    buildName: ''
})

// 管理员数据
const userList = ref([])
// 表格高度
const tableHeight = ref(0)
onMounted(() => {
    tableHeight.value = window.innerHeight - 220
})
// 表格内容
const tableData = ref([])
// 新增或者编辑栋数弹框属性
const dialog = reactive({
    title: '',
    visible: false,
    width: 630,
    height: 180
})
// 新增或者编辑层数弹框属性
const dstreyDialog = reactive({
    title: '',
    visible: false,
    width: 630,
    height: 180
})

// 新增栋数表单绑定内容
const addModel = reactive({
    type: '0', // 区分是新增还是编辑 0: 新增 1: 编辑
    buildId: '',
    userId: '',
    buildStorey: '',
    sex: '',
    buildName: '',
    orderNum: ''
})
// 新增层数表单绑定内容
const dstreyModel = reactive({
    type: '0', // 区分是新增还是编辑 0: 新增 1: 编辑
    buildId: '',
    storeyId: '',
    storeyName: '',
    orderNum: ''
})
// 层数在栋数新增的时候允许编辑
const disabled = ref(false)
// 新增栋数表单校验规则
const rules = {
    buildName: [
        {
            trigger: 'blur',
            required: true,
            message: '请填写栋数名称'
        }
    ],
    userId: [
        {
            trigger: 'change',
            required: true,
            message: '请选择管理员'
        }
    ],
    buildStorey: [
        {
            trigger: 'blur',
            required: true,
            message: '请填写楼层'
        }
    ],
    sex: [
        {
            trigger: 'blur',
            required: true,
            message: '请选择性别'
        }
    ],
}
// 新增层数表单校验规则
const dstreyRules = {
    storeyName: [
        {
            trigger: 'blur',
            required: true,
            message: '请填写层数名称'
        }
    ],
    orderNum: [
        {
            trigger: 'blur',
            required: true,
            message: '请填写序号'
        }
    ]
}

// 获取栋数列表
const getList = async () => {
    let res = await getListApi(searchModel)
    if (res) {
        tableData.value = res.data.records
        searchModel.total = res.data.total
    }
}
getList()
// 获取管理员列表
const getUserList = async () => {
    let res = await getUserListApi()
    if (res) {
        userList.value = res.data
    }
}
getUserList()

// 搜索按钮
const searchBtn = async () => getList()
// 重置按钮
const resetBtn = async () => {
    searchModel.buildName = ''
    searchModel.currentPage = 1
    getList()
}
const addForm = ref(null)
// 新增按钮
const addBtn = async () => {
    // 清除上一次的数据
    resetForm(addForm.value, addModel)
    dialog.title = '新增栋数'
    dialog.visible = true
    addModel.type = '0'
}
// 页面大小改变事件
const sizeChange = (size) => {
    searchModel.pageSize = size
    getList()
}
// 选中页改变事件
const currentChange = (page) => {
    searchModel.currentPage = page
    getList()
}
// 弹窗确认事件
const onConfirm = async () => {
    await addForm.value.validate(async (valid) => {
        if (valid) {
            let res = null
            if (addModel.type === '0') {
                res = await addApi(addModel)
            } else if (addModel.type === '1') {
                res = await editApi(addModel)
            }
            if (res) {
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
                // 刷新表格数据
                getList()
                dialog.visible = false
            }
        }
    })
}
// 弹窗关闭事件
const onClose = () => dialog.visible = false
// 层数编辑事件
const dstreyForm = ref(null)
const childEdit = (row) => {
    // 清空上一次的表单
    resetForm(dstreyForm.value, dstreyModel)
    // 把要编辑的数据放入表单
    objCoppy(row, dstreyModel)
    dstreyModel.type = '1'
    dstreyModel.buildId = row.buildId
    dstreyDialog.title = '编辑层数'
    dstreyDialog.visible = true
}
// 层数删除事件
const childDelete = async (row) => {
    let confirm = await myConfrim('确定要删除该层的数据吗?')
    if (confirm) {
        let res = await deleteStroyApi({
            buildId: row.buildId,
            storeyId: row.storeyId
        })
        if (res) {
            ElMessage({
                message: res.msg,
                type: 'success',
            })
            // 刷新表格数据
            getList()
        }
    }
}
// 新增层数事件
const storeyAdd = (row) => {
    // 清空上一次的表单
    resetForm(dstreyForm.value, dstreyModel)
    dstreyModel.type = '0'
    dstreyModel.buildId = row.buildId
    dstreyDialog.title = '新增层数'
    dstreyDialog.visible = true
}
// 栋数编辑事件
const buildEdit = (row) => {
    // 清除上一次的数据
    resetForm(addForm.value, addModel)
    // 把要编辑的数据放入表单
    objCoppy(row, addModel)
    disabled.value = true
    dialog.title = '编辑栋数'
    dialog.visible = true
    addModel.type = '1'
}
// 栋数删除事件
const buildDelete = async (row) => {
    let confirm = await myConfrim('确定要删除该栋楼的数据吗?')
    if (confirm) {
        let res = await deleteApi({
            buildId: row.buildId
        })
        if (res) {
            ElMessage({
                message: res.msg,
                type: 'success',
            })
            // 刷新表格数据
            getList()
        }
    }
}
// 层数弹窗确认
const onDstreyConfirm = async () => {
    await dstreyForm.value.validate(async (valid) => {
        if (valid) {
            let res = null
            if (dstreyModel.type === '0') {
                res = await addStroyApi(dstreyModel)
            } else if (dstreyModel.type === '1') {
                res = await editStroyApi(dstreyModel)
            }
            if (res) {
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
                getList()
                dstreyDialog.visible = false
            }
        }
    })
}
// 层数弹窗取消
const onDstreyClose = () => dstreyDialog.visible = false
</script>

<template>
    <!-- 搜索区域 -->
    <el-form :model="searchModel" label-width="80px" :inline="true">
        <el-form-item>
            <el-input placeholder="请输入楼栋名称" v-model="searchModel.buildName"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button icon="Search" @click="searchBtn">搜索</el-button>
            <el-button icon="Close" style="color: #ff7670;" @click="resetBtn">重置</el-button>
            <el-button icon="Plus" type="primary" @click="addBtn">新增</el-button>
        </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <el-table :height="tableHeight" :data="tableData" border stripe :header-cell-style="{ background: '#fafafa' }">
        <el-table-column width="100" type="expand">
            <template #default="scope">
                <el-table border :data="scope.row.storeys">
                    <el-table-column label="层数" align="center" prop="storeyName"></el-table-column>
                    <el-table-column label="序号" align="center" prop="orderNum"></el-table-column>
                    <el-table-column fixed="right" label="操作" align="center" width="200">
                        <template #default="scopeSub">
                            <div flex>
                                <el-button round type="success" icon="Edit" @click="childEdit(scopeSub.row)">编辑</el-button>
                                <el-button round type="danger" icon="Delete" @click="childDelete(scopeSub.row)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-table-column>
        <el-table-column label="名称" prop="buildName"></el-table-column>
        <el-table-column label="性别" prop="sex">
            <template #default="scope">
                <el-tag v-if="scope.row.sex == '0'">男</el-tag>
                <el-tag type="danger" v-else>女</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="层数" prop="buildStorey"></el-table-column>
        <el-table-column label="序号" prop="orderNum"></el-table-column>
        <el-table-column label="操作" align="center" width="330">
            <template #default="scopeSub">
                <div flex>
                    <el-button type="primary" icon="Edit" @click="buildEdit(scopeSub.row)">编辑</el-button>
                    <el-button type="danger" icon="Delete" @click="buildDelete(scopeSub.row)">删除</el-button>
                    <el-button type="success" icon="Plus" @click="storeyAdd(scopeSub.row)">新增层数</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="searchModel.currentPage"
        :page-sizes="[10, 20, 40, 80, 100]" :page-size="searchModel.pageSize" layout="total,sizes,prev,pager,next,jumper"
        :total="searchModel.total" background :pager-count="7">
    </el-pagination>
    <!-- 栋数新增或者编辑弹框 -->
    <el-dialog v-model="dialog.visible" :width="dialog.width" :close-on-click-modal="false">
        <template #header>
            <h1>{{ dialog.title }}</h1>
        </template>
        <div :style="{ height: dialog.height + 'px' }">
            <el-form :model="addModel" ref="addForm" :rules="rules" label-width="80px">

                <el-row>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="buildName" label="栋数名称">
                            <el-input v-model="addModel.buildName" placeholder="请输入栋数名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="buildStorey" label="层数">
                            <el-input :disabled="disabled" type="number" v-model="addModel.buildStorey"
                                placeholder="请输入层数"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="userId" label="管理员">
                            <el-select style="width: 100%;" v-model="addModel.userId" placeholder="请选择管理员">
                                <el-option v-for="item in userList" :key="item.userId" :label="item.nickName"
                                    :value="item.userId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="sex" label="性别">
                            <el-radio-group v-model="addModel.sex">
                                <el-radio :label="'0'">男</el-radio>
                                <el-radio :label="'1'">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="序号">
                            <el-input type="number" v-model="addModel.orderNum" placeholder="请输入序号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onClose">取消</el-button>
                <el-button type="primary" @click="onConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 层数新增或者编辑弹窗 -->
    <el-dialog v-model="dstreyDialog.visible" :width="dstreyDialog.width" :close-on-click-modal="false">
        <template #header>
            <h1>{{ dstreyDialog.title }}</h1>
        </template>
        <div :style="{ height: dstreyDialog.height + 'px' }">
            <el-form :model="dstreyModel" ref="dstreyForm" label-width="80px" :rules="dstreyRules">
                <el-form-item label="层数名称" prop="storeyName">
                    <el-input v-model="dstreyModel.storeyName" placeholder="请输入层数名称">
                    </el-input>
                </el-form-item>
                <el-form-item label="序号" prop="orderNum">
                    <el-input v-model="dstreyModel.orderNum" placeholder="请输入序号">
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onDstreyClose">取消</el-button>
                <el-button type="primary" @click="onDstreyConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>